<template>
  <div class="xuan">
    <ul>
      <li :class="{ to_active: shows == 1 }" @click="today_a">
        <p>官方精选</p>
        <span>实时热抢</span>
      </li>
      <li :class="{ to_active: shows == 2 }" @click="today_b">
        <p>16:00</p>
        <span>抢购中</span>
      </li>
      <li :class="{ to_active: shows == 3 }" @click="today_c">
        <p>00:00</p>
        <span>明日开始</span>
      </li>
      <li :class="{ to_active: shows == 4 }" @click="today_d">
        <p>00:00</p>
        <span>明日开始</span>
      </li>
      <li :class="{ to_active: shows == 5 }" @click="today_e">
        <p>00:00</p>
        <span>明日开始</span>
      </li>
      <li :class="{ to_active: shows == 6 }" @click="today_f">
        <p>00:00</p>
        <span>明日开始</span>
      </li>
    </ul>
    <!-- <keep-alive>
      <component :is="com"></component>
    </keep-alive> -->
  </div>
</template>

<script>
// import Demoa from "../../dtzj/Demoa.vue";
// import Demob from "../../dtzj/Demob.vue";
// import Democ from "../../dtzj/Democ.vue";
// import Demod from "../../dtzj/Demod.vue";
export default {
  data() {
    return {
      // com: "Demoa",
      shows: 1,
    };
  },
  components: {
    // Demoa,
    // Demob,
    // Democ,
    // Demod,
  },
  methods: {
    today_a() {
      // this.com = "Demoa";
      this.shows = 1;
    },
    today_b() {
      // this.com = "Demob";
      this.shows = 2;
    },
    today_c() {
      // this.com = "Democ";
      this.shows = 3;
    },
    today_d() {
      this.shows = 4;
    },
    today_e() {
      this.shows = 5;
    },
    today_f() {
      this.shows = 6;
    },
  },
};
</script>

<style scoped>
.xuan ul {
  width: 100%;
  display: block;
  display: flex;
  height: 0.52rem;
  text-align: center;
  overflow-x: auto;
  white-space: nowrap;
  color: #ffb3b8;
  font-size: 0.16rem;
 
}
ul::-webkit-scrollbar {
  display: none;
}
li {
  margin: 0 0.18rem;
}
ul li:nth-child(1) {
  margin-left: 0;
}
.to_active {
  border-bottom: 0.02rem solid white;
  color: white;
}
</style>